<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-table
          stripe
          border
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="#"
            width="50"
          />
          <el-table-column
            prop="authName"
            label="权限名称"
          />
          <el-table-column
            prop="path"
            label="路劲"
          />
          <el-table-column
            prop="level"
            label="权限等级"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.level|getColorType">
                {{ scope.row.level|getText }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { allPermissionsList } from '@/api/table'
export default {
  filters: {
    // tag类型
    getColorType(level) {
      const colorType = {
        0: 'primary',
        1: 'success',
        2: 'warning'
      }
      return colorType[level]
    },
    // 显示内容
    getText(level) {
      const colorText = {
        0: '等级一',
        1: '等级二',
        2: '等级三'
      }
      return colorText[level]
    }
  },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 类型为list
      type: 'list',
      filters: [{ text: '等级一', value: '0' }, { text: '等级二', value: '1' }, { text: '等级三', value: '2' }]
    }
  },

  created() {
    this.loadAllPermissionList()
    // this.formatType()
  },

  methods: {
    // 获取所有权限列表
    async  loadAllPermissionList() {
      const res = await allPermissionsList(this.type)
      // console.log(res)
      this.tableData = res
    },
    filterTag(value, row) {
      return row.level === value
    }
    // formatType(row, column, cellValue, index) {
    //   // console.log(row)
    //   // console.log(column)
    //   console.log(cellValue)
    //   // console.log(index)
    //   const findItem = levelType.find(item => item.id === cellValue)
    //   return findItem ? findItem.value : '00'
    // }
  }
}
</script>

<style scoped lang='scss'>
.el-table{
  z-index: 1;
}
</style>

